// pages/game/game.js

var data = require('../../utils/data.js')

//地图图层数据(墙,道路,终点)
//地图数据：1墙，2路，3终点，4箱子，5人物，0墙的外围
var map = [
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0]
]

//箱子图层数据
var box = [
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0]
]

//方块的边长
var w = 40

//游戏主角小鸟所在的行和列
var row = 0
var col = 0

Page({

  /**
   * 页面的初始数据
   */
  data: {
    level: 1
  },

  /**
   * 自定义函数--初始化地图数
   */
  initMap: function (level) { //因为有4个关卡
    //读取原始地图数据(从暴露的data接口中获取maps中的level)
    let mapData = data.maps[level]
    
    //双for循环, 记录地图数据
    for(var i=0;i<8;i++){
      for(var j=0;j<8;j++){
        box[i][j]=0 //归零
        map[i][j]=mapData[i][j] //把原始数据读取出来
        
        //当前位置是箱子
        if(mapData[i][j]==4){
          box[i][j]=4 //更新箱子的位置
          map[i][j]=2 //更新地图层的位置
        }
        //否则,如果当前位置是游戏主角小鸟
        else if(mapData[i][j]==5){
          map[i][j]=2 //小鸟的位置更新为道路
          //更新小鸟当前所在的行和列
          row=i
          col=j
        }
      }
    }
  },

  /**
   * 自定义函数--绘制画布内容
   */
  drawCanvas: function () {//墙,道路,终点,箱子,小鸟
    //拿到画笔
    let ctx = this.ctx

    //清空画布
    ctx.clearRect(0,0,320,320)

    //双for循环,绘制8*8的地图
    for(var i=0;i<8;i++){
      for(var j=0;j<8;j++){
        //默认都是道路
        let img = 'ice'

        //如果当前位置是墙
        if(map[i][j]==1){
          img = 'stone'
        }
        //如果当前位置是终点
        else if(map[i][j]==3){
          img = 'pig'
        }

        //绘制地图(url,坐标x,坐标y,宽w,高h)
        ctx.drawImage('/images/icons/'+img+'.png',j*w,i*w,w,w,)
         
        //判断
        if(box[i][j]==4){//只有是箱子的图层才绘制箱子
          //叠加绘制箱子
          ctx.drawImage('/images/icons/box.png',j*w,i*w,w,w,)
        }
      }
    }
    //叠加绘制小鸟
    ctx.drawImage('/images/icons/bird.png',col*w,row*w,w,w,)

    //渲染画布
    ctx.draw()
  },//drawCanvas() 结束

  /**
   * 自定义函数--方向键:向上
   */
  up: function () {
    //如果小鸟不在最顶端,才考虑向上
    if(row>0){
      //如果上方不是墙也不是箱子, 小鸟可向上
      if(map[row-1][col]!=1 && box[row-1][col]!=4){
        //更新小鸟当前坐标
        row -= 1
      }
      //如果上方是箱子
      else if(box[row-1][col]==4){
        //如果箱子不在最顶端,才可以考虑推动
        if(row-1>0){
          //如果箱子的上方不是墙,或另一个箱子
          if(map[row-2][col]!=1 && box[row-2][col]!=4){
            //更新箱子的数据
            box[row-2][col]=4
            box[row-1][col]=0
            //更新小鸟的坐标
            row -= 1
          }
        }
      }
      //重新绘制地图(因为已经变更了,需要重绘才能显示最新的结果)
      this.drawCanvas()
      //检查游戏是否成功(向上的情况)
      this.checkWin()
    }
  },

  /**
   * 自定义函数--方向键:向下
   */
  down: function () {
    //如果小鸟不在最底端,才考虑向下
    if(row<7){
      //如果下方不是墙也不是箱子, 小鸟可向下
      if(map[row+1][col]!=1 && box[row+1][col]!=4){
        //更新小鸟当前坐标
        row += 1
      }
      //如果下方是箱子
      else if(box[row+1][col]==4){
        //如果箱子不在最底端,才可以考虑推动
        if(row+1<7){
          //如果箱子的下方不是墙,或另一个箱子
          if(map[row+2][col]!=1 && box[row+2][col]!=4){
            //更新箱子的数据
            box[row+2][col]=4
            box[row+1][col]=0
            //更新小鸟的坐标
            row += 1
          }
        }
      }
      //重新绘制地图(因为已经变更了,需要重绘才能显示最新的结果)
      this.drawCanvas()
      //检查游戏是否成功(向下的情况)
      this.checkWin()
    }
  },

  /**
   * 自定义函数--方向键:向左
   */
  left: function () {
    //如果小鸟不在最左侧,才考虑向左
    if(col>0){
      //如果左侧不是墙也不是箱子, 小鸟可向左
      if(map[row][col-1]!=1 && box[row][col-1]!=4){
        //更新小鸟当前坐标
        col -= 1
      }
      //如果左侧是箱子
      else if(box[row][col-1]==4){
        //如果箱子不在最左侧,才可以考虑推动
        if(col-1>0){
          //如果箱子的左侧不是墙,或另一个箱子
          if(map[row][col-2]!=1 && box[row][col-2]!=4){
            //更新箱子的数据
            box[row][col-2]=4
            box[row][col-1]=0
            //更新小鸟的坐标
            col -= 1
          }
        }
      }
      //重新绘制地图(因为已经变更了,需要重绘才能显示最新的结果)
      this.drawCanvas()
      //检查游戏是否成功(向左的情况)
      this.checkWin()
    }
  },

  /**
   * 自定义函数--方向键:向右
   */
  right: function () {
    //如果小鸟不在最右侧,才考虑向右
    if(col<7){
      //如果右侧不是墙也不是箱子, 小鸟可向右
      if(map[row][col+1]!=1 && box[row][col+1]!=4){
        //更新小鸟当前坐标
        col += 1
      }
      //如果右侧是箱子
      else if(box[row][col+1]==4){
        //如果箱子不在最右侧,才可以考虑推动
        if(col+1>0){
          //如果箱子的右侧不是墙,或另一个箱子
          if(map[row][col+2]!=1 && box[row][col+2]!=4){
            //更新箱子的数据
            box[row][col+2]=4
            box[row][col+1]=0
            //更新小鸟的坐标
            col += 1
          }
        }
      }
      //重新绘制地图(因为已经变更了,需要重绘才能显示最新的结果)
      this.drawCanvas()

      //检查游戏是否成功(向右的情况)
      this.checkWin()
    }
  },

  /**
   * 自定义函数--判断游戏是否成功
   */
  isWin: function () {
    //双for循环,记录地图数据
    for(var i=0;i<8;i++){
      for(var j=0;j<8;j++){
        //若干有任何一个箱子不在终点
        if(box[i][j]==4 && map[i][j]!=3){
          //返回假, 游戏未成功
          return false
        }
      }
    }
    //返回真,游戏成功
    return true
  },

  /**
   * 自定义函数--游戏成功处理
   */
  checkWin: function () {
    if(this.isWin()){
      wx.showModal({
        title:'恭喜',
        content:'游戏成功',
        showCancel:false //不显示'取消'按钮, 只显示'确认'按钮
      })
    }
  },

  /**
   * 自定义函数--重启游戏
   */
  restartGame: function () {
    //重新初始化地图数据(当前第几关的数据)
    this.initMap(this.data.level-1)
    //绘制画布内容
    this.drawCanvas()
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (e) {
    //console.log(e.level)

    //获取关卡
    let level = e.level

    //更新关卡标题
    this.setData({
      level:parseInt(level)+1
    })

    //声明画笔(创建画布上下文)
    this.ctx = wx.createCanvasContext('myCanvas')

    //初始化地图数据
    this.initMap(level) 

    //绘制地图
    this.drawCanvas()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})